import * as React from 'react';
import LazyLoad from 'react-lazyload';

const ImageTest =  () => {
  return (
    <div className="list">
      <LazyLoad height={200}>
        <img src="http://static.assure.com/images/bg/login_background.png" /> /*
        Lazy loading images is supported out of box,
        no extra config needed, set `height` for better
        experience
        */
      </LazyLoad>
      <LazyLoad height={200} once >
        /* Once this component is loaded, LazyLoad will
        not care about it anymore, set this to `true`
        if you're concerned about improving performance */
      </LazyLoad>
      <LazyLoad height={200} offset={100}>
        /* This component will be loaded when it's top
        edge is 100px from viewport. It's useful to
        make user ignorant about lazy load effect. */
        <img src="http://static.assure.com/images/photo/veer-165301099.jpg"/>
      </LazyLoad>
      <LazyLoad>
        <img src="http://static.assure.com/images/photo/veer-136707035.jpg"/>
      </LazyLoad>
    </div>
  );
};

export default ImageTest;